<template>
	<view class="sale-details u-flex">
		<fui-nav-bar title="合约内容" isFixed isOccupy  @leftClick="pageBack"></fui-nav-bar>
		<view class="shop-header">
			<image :src="initData.logoUrl?initData.logoUrl:defaultLogo" mode="" class="shop-logo"></image>
			<view class="shop-name u-text-center">
				{{initData.name}}
			</view>
			<view class="u-m-b-60 u-m-t-20 u-text-center">
				已签约 {{initData.numberOfContractedItems}} 个单品
			</view>
		</view>
		<view class="u-p-35 u-m-t-20 contract-content">
			<view class="u-flex u-col-top u-m-b-30">
				<view class="list-title">支付方式</view>
				<view class="u-m-l-30 u-flex u-flex-wrap" style="flex:1;">
					<view class="u-flex u-m-r-20 u-m-b-10" v-for="item in initData.salesAgreementCollections" :key="item.id">
						<image src="/static/payment/weixuanze.png" v-if="item.collectionType == null" mode="" class="paymethod-logo"></image>
						<image src="/static/payment/weixin.png" v-if="item.collectionType == 0||item.collectionType == 7||item.collectionType == 5" mode="" class="paymethod-logo"></image>
						<image src="/static/payment/zhifubao.png" v-if="item.collectionType == 1||item.collectionType == 11||item.collectionType == 13" mode="" class="paymethod-logo"></image>
						<image src="/static/payment/xianxiazhifu.png" v-if="item.collectionType == 3||item.collectionType == 4" mode="" class="paymethod-logo"></image>
						<image src="/static/payment/gonghang.png" v-if="item.collectionType == 10||item.collectionType == 6" mode="" class="paymethod-logo"></image>
						<text style="font-size: 26rpx;font-weight: bold; color: #333;margin-left: 10rpx;">{{item.name}}</text>
					</view>
				</view>
				
			</view>
			<view class="u-flex  u-col-top u-m-b-30">
				<view class="list-title">结算方式</view>
				<view class="list-text">
					{{initData.settlementMethod === 0?'先款后货':'先货后款'}}
				</view>
			</view>
			<view class="u-m-b-30" v-if="initData.settlementMethod === 1">
				<view class="list-title">信用额度</view>
				<view class="u-p-30 u-m-t-20" style="width: 100%;box-shadow: 0rpx 0px 8rpx 2rpx rgba(8,1,3,0.05);border-radius: 20rpx;">
					<view class="u-flex u-row-between">
						<view class="u-font-22">
							使用情况   {{initData.used}}  /  {{initData.total}}
						</view>
						<view class="u-font-22" v-if="initData.used<initData.total">
							剩余额度 {{initData.balance}}
						</view>
						<view class="u-font-22" v-else style="color:#ff551a">
							额度不足
						</view>
					</view>
					<fui-progress  class="used-progress u-m-t-20 "  :percent="initData.used<initData.total?(initData.used/initData.total)*100:100"></fui-progress>
				</view>
			</view>
			<view class="u-flex u-col-top u-m-b-30">
				<view class="list-title">运&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;费</view>
				<view class="list-text">
					<!-- 起购到付额 100000 元 包邮自提额 200000 元 包邮包送额 300000 元 -->
					<view>起购到付额 {{initData.baseValue?initData.baseValue+'元':'未设置'}} </view>
					<view>包邮自提额 {{initData.freeDeliveryValue?initData.freeDeliveryValue+'元':'未设置'}} </view>
					<view>包邮包送额 {{initData.freeShippingValue?initData.freeShippingValue+'元':'未设置'}} </view>
				</view>
			</view>
			<view class="u-flex u-col-top u-m-b-30">
				<view class="list-title">售&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;后</view>
				<view class="list-text">
					{{initData.openAfterSales?'已开启售后':'未开启售后'}}
				</view>
			</view>
		</view>
	<!-- 	<view class="u-flex  contact-bottom">
			<view class="u-flex u-p-30 contact-bot_item u-row-center u-col-center">
				<image src="/static/home/icon_kaifapiao.png" mode="heightFix" style="height: 60rpx;"></image>
				<text class="u-font-28 u-m-t-20">开发票</text>
			</view>
			<view class="u-flex u-p-30 contact-bot_item u-row-center u-col-center" style="border-left: 1px solid #eee;border-right: 1px solid #eee;">
				<image src="/static/home/icon_shouhou.png" mode="heightFix" style="height: 60rpx;"></image>
				<text class="u-font-28 u-m-t-20">售后</text>
			</view>
			<view class="u-flex u-p-30 contact-bot_item u-row-center u-col-center">
				<image src="/static/home/icon_payorder.png" mode="heightFix" style="height: 60rpx;"></image>
				<text class="u-font-28 u-m-t-20">付款</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default{
		data(){
			return{
				initData:{}
			}
		},
		onLoad(options) {
			this.initData = JSON.parse(options.data);
			console.log(this.initData);
		},
	}
</script>

<style lang="scss" scoped>
	.sale-details{
		flex-direction: column;
		height: 100%;
		.shop-header{
			width: 100%;
			background: #fff;
			overflow: hidden;
			.shop-logo{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin: 48rpx auto 30rpx;
				display:block;
			}
			.shop-name{
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
			}
			
		}
		.contract-content{
			width: 100%;
			background-color: #fff;
			flex:1;
			.list-title{
				color: #666;
				font-size: 30rpx
			}
			.list-text{
				color: #333;
				font-size: 30rpx;
				margin-left: 30rpx;
				flex:1;
			}
			.paymethod-logo{
				width: 48rpx;
				height: 48rpx;
			}
		}
		.used-progress{
			::v-deep .fui-progress__active-color{
				background:linear-gradient(90deg, #FFBB1A, #FF551A) !important;
			}
		}
		.contact-bottom{
			background-color: #fff;
			border-top: 1px solid #EEEEEE;
			width: 100%;
			.contact-bot_item{
				flex:1;
				flex-direction: column;
			}
		}
	}
</style>